<template>
  <div style="display: inline-block;">
    <slot v-bind:on="toggle">
      <el-button v-bind="$attrs" @click.stop="toggle" v-on="$listeners">{{btnText}}</el-button>
    </slot>
    <el-dialog title="导入参数" :close-on-click-modal="false" append-to-body :visible.sync="show"
      class="dialog_index dialog_banner site_fixed"
      :before-close="cancle">
      <el-form ref="form" class="import_params" style="margin-top: 25px;">
        <el-form-item label="产品编码：">
          <el-select v-model="formData.product_name"  clearable filterable  :placeholder="'产品编码（必填项)'">
            <el-option v-for="product in productNameList" :key="product.value" :value="product.value" :label="product.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板下载：" >
          <el-button type="search" @click="download">模板下载</el-button>
        </el-form-item>
        <el-form-item label="模板导入：" >
          <el-row type="flex">
            <el-input :value="filename" disabled readonly></el-input>
            <el-button style="margin-left: 10px;position: relative;" type="search">
              <span>模板导入</span>
              <input type="file" id="importParams" accept=".xls,.xlsx " :multiple="false" @change="changeFile" />
            </el-button>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="search" :loading="loading" @click="submit">保存</el-button>
        <el-button @click="cancle">取消</el-button>
      </span>
   </el-dialog>
  </div>
</template>

<script>
import { erpProducNameList, postImport } from '@/api/product/productBasic.js'
export default {
  props: {
    btnText: {
      type: String,
      default() {
        return '导入参数'
      }
    }
  },
  data() {
    return {
      show: false,
      loading: false,
      filename: '',
      file: '',
      formData: {
        product_name: ''
      },

      productNameList: []
    }
  },
  methods: {
    download() {
      window.open(window.location.protocol+'//' + window.location.hostname + '/api/api/download/导入模板-产品管理.xlsx')
    },

    changeFile(event){
      var fileList = event.target.files[0]; // (利用console.log输出看file文件对象)
      if(fileList) {
        this.filename = fileList.name
        this.file = fileList
      } else {
        this.$message.error('文件上传失败')  
      }
      document.getElementById("importParams").value='';
    },

    toggle() {
      this.show = !this.show
      if(this.show) {
        this.getProductName()
      }
    },

    getProductName () {
       erpProducNameList().then(res=>{
        if(res.state == 1){
          this.productNameList = res.data
        }
      })
    },

    submit() {
      if(!this.formData.product_name) {
        this.$message.error('产品编码不能为空！')
        return
      }
      if(!this.file) {
        this.$message.error('请选择文件后再导入！')
        return
      }
      this.loading = true
      let params = new FormData()
      params.append('file', this.file)
      params.append('product_name', this.formData.product_name)
      postImport(params).then(res => {
        let data =res.data
        if(data.state == 1){
          this.$message.success('导入成功')   
          this.cancle()
        } else if(data.state == 0) {
          this.$message.error(data.message)   
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('保存失败！')
      }).finally(() => {
        this.loading = false
      })
    },

    cancle(){
      this.$emit('closeDialog')
      this.filename = ''
      this.file = ''
      this.formData.product_name = ''
      this.$refs.form.resetFields(); // 清空原来的数据
      this.toggle()
    },
  }
}
</script>

<style lang="scss">
 #importParams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
 }
 .import_params .el-input .el-input__inner {
   color: #d5d5d5;
 }
</style>